<template>
    <div>
        <!-- 查询 -->
        <!-- 搜索 -->
        <!-- 表格 -->
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus">新增</el-button>
        <el-input placeholder="请输入关键字" v-model="keywords" class="input-with-select">
            <el-button slot="append" type="primary" icon="el-icon-search" class="searchBtn" @click="searchBtn"></el-button>
        </el-input>
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading" @sort-change="sortChange">
              <el-table-column fixed type="index" label="*" sortable min-width="40" align="center"></el-table-column>
            <el-table-column prop="code" label="物料编码" show-overflow-tooltip sortable min-width="120" align="center"></el-table-column>
            <el-table-column prop="name" label="物料名称"  sortable min-width="80" align="center"></el-table-column>
            <el-table-column prop="figureNum" label="图号" sortable min-width="80" align="center"></el-table-column>
            <el-table-column prop="specification" label=" 规格型号" sortable min-width="120" align="center"></el-table-column>
            <el-table-column prop="texture" label="材质" sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="managerLevelName" label=" 管理等级" show-overflow-tooltip sortable  min-width="80" align="center"></el-table-column>
            <el-table-column prop="cost" label="成本" sortable min-width="80" align="center"></el-table-column>
            <el-table-column prop="useBelongingName" label="使用归属" sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="typeAttributesName" label="种类属性" sortable min-width="100" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                    <el-button @click="deleteData(scope.row)" type="text" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->
        <el-dialog :title="dialog.title" width="750px" center :visible.sync="dialog.isShow" :close-on-click-modal="false">
            <div :style="tableDialogHeightTabPane">
            <h3 class="dialog-plate-title">基础信息</h3>
            <el-form :inline="true" class="demo-form-inline" v-model="dialogList" label-position="right" label-width="120px">
                <el-form-item label="物料编码"><el-input v-model="dialogList.code"></el-input></el-form-item>
                <el-form-item label="物料名称"><el-input v-model="dialogList.name" ></el-input></el-form-item>
                <el-form-item label="规格型号"><el-input v-model="dialogList.specification" ></el-input></el-form-item>
                <el-form-item label="图号"><el-input v-model="dialogList.figureNum" ></el-input></el-form-item>
                <el-form-item label="材质"><el-input v-model="dialogList.texture" ></el-input></el-form-item>
                    <el-form-item label="管理等级">
                        <el-select v-model="dialogList.managerLevel" placeholder="请选择" :disabled="dialog.title=='编辑'">
                            <el-option :label="item.name" :value="item.code" v-for="item in mangerLevelList" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="使用归属">
                        <el-select v-model="dialogList.useBelonging" placeholder="请选择" :disabled="dialog.title=='编辑'">
                            <el-option :label="item.name" :value="item.code" v-for="item in useBelongingList" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="种类属性">
                        <el-select v-model="dialogList.typeAttributes" placeholder="请选择" :disabled="dialog.title=='编辑'">
                            <el-option :label="item.name" :value="item.code" v-for="item in typeAttributesList" :key="item.id"></el-option>
                        </el-select>
                </el-form-item>
                 <el-form-item label="理论单价"><el-input v-model="dialogList.cost" ></el-input></el-form-item>
                <el-form-item label="复杂系数"><el-input v-model="dialogList.complexityLevel" ></el-input></el-form-item>
                <el-form-item label="制程属性"><el-input v-model="dialogList.manufactureProcedure" ></el-input></el-form-item>
                <el-form-item label="填写人"><el-input v-model="dialogList.signedPerson" disabled ></el-input></el-form-item>
                <el-form-item label="填写时间"><el-input v-model="dialogList.signedTime" disabled ></el-input></el-form-item>

            </el-form>
            </div>

            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/axios/api.js'
export default {
    data(){
        return {
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            keywords:'',/**关键字 */
            sort:{/**排序 */
                sortBy:'',
                desc:null,
            },
            dialogForm:{},/**表单提交参数 */
            mangerLevelList:[], /**管理等级列表 */
            useBelongingList:[],/**使用归属列表 */
            typeAttributesList:[],/**种类属性列表 */
            actionUrl:api.idImgUpload(),/**图片上传接口 */
            dialog:{/**弹框配置 */
                title:'',
                isShow:false,
            },
            dialogList:{},
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            isDesignAbilityList:[/**有无设计能力选项 */
                {
                    label:'有',
                    value:'1'
                },
                {
                    label:'无',
                    value:'0'
                }
            ],
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            }
        }
    },
    created(){
        let self = this;
         self.getTableDate();
        api.machineTypeCode(8).then(res=>{
            /**管理等级 */
            self.mangerLevelList = res.content;
        })

        api.machineTypeCode(9).then(res=>{
            /** 使用归属 */
            self.useBelongingList = res.content;
        })

        api.machineTypeCode(10).then(res=>{
            /**获取发票类型 */
            self.typeAttributesList = res.content;
        })

    },
    methods:{
        getTableDate(){/**获取表格内容 */
            let self = this;
            let params={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                sortBy:self.sort.sortBy,
                desc:self.sort.desc,
                key:self.keywords
            }
            self.loading=true;
            api.materialQueryByPage(params).then(res=>{
                self.loading=false;
                self.tabaleData = res.content.records;
                self.pagination.total=res.content.total
            },error=>{
                 self.loading=false;
            })
        },


        handleSizeChange(size){/**改变分页条数 */
            this.pagination.pageSize=size;
            this.pagination.currentPage=1;
            this.getTableDate()
        },
        handleCurrentChange(current){/**改变分页页码 */
            this.pagination.currentPage = current;
            this.getTableDate();
        },
        searchBtn(){/**点击搜索 */
            this.pagination.currentPage=1;
            this.getTableDate();
        },
        sortChange(sort){/**点击排序 */
            if(sort.order===null){
                this.sort.sortBy='';
                this.sort.desc=null;
            }else{
                this.sort.sortBy=sort.prop;
                this.sort.desc = sort.order==='ascending'?false:true;
            }
           this.pagination.currentPage=1;
            this.getTableDate();
        },
        isShowDialog(type,row){/**点击弹出新增或编辑弹框 */
            let self = this;
            self.dialog.isShow=true;
            self.dialog.title= type==="insert"?"新增":"编辑";
            if(type==="insert"){
             self.dialogList={
                code:'',
                complexityLevel: '',
                cost: '',
                id: '',
                managerLevel:'',
                manufactureProcedure: '',
                name: '',
                parentId:'',
                signedPerson: '',
                signedTime: '',
                specification: '',
                texture: '',
                typeAttributes: '',
                useBelonging: '',
                figureNum:'',
             }
            }else{
                self.dialogList=row;
                 self.dialogList.isDesignAbility=String(self.dialogList.isDesignAbility);
            }

        },


        submitList(){/**新增或编辑供应商基础信息 */
            let self = this;
            let type = self.dialog.title==="新增"?'insert':'update';
            api.addOrUpdateBom(type,self.dialogList).then(res=>{
                self.dialog.isShow=false;
                self.getTableDate();

                self.$message.success(`${self.dialog.title}成功`);
            },error=>{
                 console.log(self.dialogList)
                 self.$message.error(`${self.dialog.title}失败`)
            })
        },
        deleteData(row){/**点击删除 */
            let self = this;
            self.$confirm('确认是否删除?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    api.deletematerial(row.id).then(res=>{
                        self.getTableDate();
                        self.$message.success("供应商基础信息删除成功！");
                    },error=>{
                        self.$message.error("供应商基础信息删除失败！");
                    })
                }).catch(() => {
            });
        }
    }
}
</script>
<style scoped>
.input-with-select{
    width:240px;
}
.searchBtn{
    background: #409eff !important;
    color:#fff !important;
}
.uploadImg{
    height:200px;
    overflow: hidden;
    padding:10px 24px;
    box-sizing: border-box;
}
.uploadImg .avatar-uploader{
    height:100%;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.uploadImg .avatar-uploader:hover{
border-color: #409EFF;
}
.uploadImg .avatar-uploader .el-icon-plus::before{
    display: block;
    font-size: 24px;
    margin-top:67px;
}
.avatar {
    max-width: 100%;
    max-height:180px ;
    display: block;
    margin:auto;
  }

</style>

